<div class="crayons-bb__header relative">
  <% if (billboard.organization_id? || billboard.custom_display_label.present?) && (billboard.type_of == "community" || billboard.type_of == "external") %>
    <div class="flex">
      <% if billboard.custom_display_label.present? %>
        <div class="crayons-bb__title"><%= billboard.custom_display_label %></div>
      <% else %>
        <a href="<%= billboard.organization.path %>" target="_blank" rel="noopener" class="flex">
          <img width="24" height="24" class="radius-default crayons-bb__image" src="<%= billboard.organization.profile_image_url_for(length: 64) %>" alt="profile" loading="lazy" />
          <div class="crayons-bb__title ml-2 fs-s fw-medium"><%= billboard.organization.name %></div>
        </a>
      <% end %>
      <% if billboard.type_of == "external" %>
        <span class="crayons-bb__indicator c-indicator c-indicator--subtle c-indicator--round fs-2xs fw-medium ml-2 py-1 px-2"><%= I18n.t("billboard.promoted") %></span>
      <% end %>
    </div>
  <% else %>
    <div class="crayons-bb__title"><%= billboard.custom_display_label.presence || Settings::Community.community_name %></div>
  <% end %>

  <button id="sponsorship-dropdown-trigger-<%= billboard.id %>" aria-controls="sponsorship-dropdown-<%= billboard.id %>" aria-expanded="false" aria-haspopup="true"
    class="dropBtn crayons-bb__dropdown crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon"
    aria-label="<%= t("billboard.menu.aria_label") %>">
      <%= crayons_icon_tag("small-overflow-horizontal", class: "pointer-events-none", title: t("billboard.menu.icon")) %>
  </button>

  <div id="sponsorship-dropdown-<%= billboard.id %>" class="crayons-dropdown bb-dropdown right-0">
    <ul class="list-none m-0">
        <li>
          <a class="crayons-link crayons-link--block" href='/billboards'>
            <%= crayons_icon_tag("info", width: 16, height: 16, aria_hidden: true, class: "c-btn__icon") %>
            <%= I18n.t("billboard.menu.what_is_a_billboard") %>
          </a>
        </li>
      <li>
        <a class="crayons-link crayons-link--block" href='/settings/customization#sponsors'>
          <%= crayons_icon_tag("setting", width: 16, height: 16, aria_hidden: true, class: "c-btn__icon") %>
          <%= I18n.t("billboard.menu.manage_preferences") %>
        </a>
      </li>
      <% if user_signed_in? %>
        <li class="js-admin-billboard-link hidden">
          <a class="crayons-link crayons-link--block" href="/admin/customization/billboards/<%= billboard.id %>/edit" data-no-instant>
            <%= crayons_icon_tag("edit", width: 16, height: 16, aria_hidden: true, class: "c-btn__icon") %>
            <%= I18n.t("billboard.menu.edit_billboard") %>
          </a>
        </li>
      <% end %>
      <hr />
      <li>
        <a class="crayons-link crayons-link--block" href="/report-abuse?billboard=<%= billboard.id %>">
          <%= crayons_icon_tag("flag", width: 16, height: 16, aria_hidden: true, class: "c-btn__icon") %>
          <%= I18n.t("billboard.menu.report_billboard") %>
        </a>
      </li>
    </ul>
  </div>
</div>
